<template>
	<view class="mainPage content" :style="{'padding-top': `${$store.state.safeArea.top || 0}px`, 'padding-bottom': `${$store.state.safeArea.bottom || 0}px`}">
		<public-head :title="title"></public-head>
		<view class="common">
			<view>系统常用语({{stylist}})</view>
			<view class="title" v-for=" (item,index) in staplelist" :key="index" @click="see(item.content)">{{item.content}}</view>
			<view>
				<u-popup v-model="show" :closeable="true" close-icon="close-circle" mode="center" border-radius="14" width="584rpx" height="326rpx">
					<view class="motitle">系统常用语</view>
					<view class="mocon">{{content}}</view>
				</u-popup>
			</view>
		</view>
		<view class="custom">
			<view class="customtit">自定义常用语</view>
			<view class="addcustom" @click="addcustom">添加</view>
			<view v-if="customlist.length">
				<view class="commons">
					<view class="title" v-for=" (item,indexs) in customlist" :key="indexs" @click="open(indexs,item.id,item.content)">{{item.content}}</view>
				</view>
			</view>
		</view>
		<u-popup class="u-popup" v-model="show1" mode="bottom" :safe-area-inset-bottom="true">
			<view class="anniu-box">
				<view class="queren">
					<view class="" @click="modify">
						修改
					</view>
					<view class="" @click="deletes">
						删除
					</view>
				</view>
				<view class="quxiao">
					取消
				</view>
			</view>
		</u-popup>
	</view>
</template>
<script>
var that
import publicHead from "@/components/publicHead/publicHead.vue"
export default {
	components: {
		publicHead
	},
	data() {
		return {
			title: "常用语设置",
			content: '',
			show: false,
			show1: false,
			indexs: 0,
			staplelist: '',
			customlist: '',
			czid: 0,
			textareaValue: '',
			stylist: '',
		}
	},
	onLoad() {
		that = this

	},
	onShow() {
		that.staple()
	},
	methods: {
		see(content) {
			that.content = content
			that.show = true
			console.log(content)
		},
		addcustom() {
			uni.navigateTo({
				url: './customidioms'
			})
		},
		staple() {
			that.$postAjax1('Doctorsside_service_settings', {
			}, function (data) {
				that.stylist = data.data.data.commonwords.system_num
				that.staplelist = data.data.data.commonwords.system
				that.customlist = data.data.data.commonwords.custom
				console.log('提现明细页面', that.staplelist)
			})
		},
		open(indexs, id, content) {
			that.show1 = true
			that.czid = id
			that.textareaValue = content
			console.log(indexs, id, content)
		},
		modify() {
			uni.navigateTo({
				url: './modify?textareaValue=' + that.textareaValue + '&id=' + that.czid
			})
			that.show1 = false

		},
		deletes() {
			that.$postAjax1('Doctorsside_delscommon_words', {
				id: that.czid
			}, function (data) {
				that.show1 = false
				that.staple()
				console.log('删除成功')
			})
		}
	}
}
</script>
<style  scoped lang="scss">
.content {
	width: 100vw;
	height: 100vh;
	background: #f6f6f6;
	.common {
		background-color: #ffffff;
		padding: 30rpx;
		.title {
			margin: 30rpx;
			overflow: hidden;
			text-overflow: ellipsis;
			display: -webkit-box;
			-webkit-line-clamp: 1;
			-webkit-box-orient: vertical;
		}
		.motitle {
			text-align: center;
			margin-top: 30rpx;
			font-size: 32rpx;
			font-weight: 600;
		}
		.mocon {
			margin: 30rpx 50rpx;
		}
	}
	.custom {
		padding: 30rpx 30rpx 0 30rpx;
		background: #fff;
		margin-top: 15rpx;
		.customtit {
			display: inline-block;
			float: left;
		}
		.addcustom {
			display: inline-block;
			float: right;
			background: linear-gradient(223deg, #ff9331 0%, #fe7600 100%);
			padding: 6rpx 28rpx;
			border-radius: 4rpx;
			color: #ffffff;
		}
		.commons {
			background-color: #ffffff;
			margin-top: 30rpx;
			padding: 15rpx;
			.title {
				margin: 10rpx;
				overflow: hidden;
				text-overflow: ellipsis;
				display: -webkit-box;
				-webkit-line-clamp: 1;
				-webkit-box-orient: vertical;
			}
			.motitle {
				text-align: center;
				margin-top: 30rpx;
				font-size: 32rpx;
				font-weight: 600;
			}
			.mocon {
				margin: 30rpx 50rpx;
			}
		}
	}
	.u-popup {
		.anniu-box {
			background-color: transparent;
			padding: 0 16rpx 0;
			// #ifndef MP-WEIXIN
			padding: 0 16rpx 76rpx;
			// #endif
			.queren {
				margin-bottom: 16rpx;
				view {
					width: 100%;
					height: 108rpx;
					background: #efefef;
					text-align: center;
					font-size: 40rpx;
					font-weight: 400;
					color: #2f78f3;
					line-height: 108rpx;
					border-bottom: 2rpx solid rgba(0, 0, 0, 0.08);
					&:nth-of-type(1) {
						border-radius: 26rpx 26rpx 0 0;
					}
					&:nth-of-type(2) {
						border-radius: 0 0 26rpx 26rpx;
						color: #ff0000;
						border: none;
					}
				}
			}
			.quxiao {
				width: 100%;
				height: 116rpx;
				background: #efefef;
				border-radius: 26rpx;
				text-align: center;
				font-size: 40rpx;
				font-weight: 400;
				line-height: 116rpx;
				color: #2f78f3;
			}
		}
	}
}
</style>
